<template>
  <!-- 九宫格分类 -->
  <div class="sdy-home-grid">
    <van-swipe class="my-swipe box" indicator-color="red">
      <van-swipe-item>
        <van-grid :column-num="5" :gutter="5">
          <van-grid-item class="grid-item" v-for="item in cateList" :key="item.id" :icon="item.img" :text="item.title"/>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid :column-num="5" :gutter="5">
          <van-grid-item class="grid-item" v-for="item in cateList" :key="item.id" :icon="item.img" :text="item.title" />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script name="sdyHomeGrid" setup lang="ts">
import { reactive } from 'vue'

// 自己准备数据
const list = [
  { id: 1, title: '京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 2, title: '数码电器', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png' },
  { id: 3, title: '京东百货', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png' },
  { id: 4, title: '京东生鲜', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },
  { id: 5, title: '京东到家', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png' },
  { id: 6, title: '充值中心', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png' },
  { id: 7, title: '附近好店', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png' },
  { id: 8, title: 'PLUS会员', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png' },
  { id: 9, title: '京东国际', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
  { id: 0, title: '京东拍卖', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png' }
]

// 自己准备接口
interface CateItemInfo {
  id: number
  img: string
  title: string
}

const cateList: CateItemInfo[] = reactive(list)
</script>

<style lang="scss" scoped>
// 九宫格的样式
.sdy-home-grid {
  height: 210px;
  box-sizing: border-box;
  margin-bottom: 50px;
  font-size: 20px;

  > .box {
    height: 250px ;
  }

}


.grid-item {
  // height: 70px;
  background-color: transparent;
}

.van-icon__image{
  width: 5em !important;
  height: 5em !important;
}

</style>
